<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/konva@2.4.2/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva TextPath Demo</title>
    <style>
        body {
      margin: 0;
      padding: 0;
      /* overflow: hidden; */
      background-color: #fff;
    }
    .wrap {
        display: flex;
        flex-direction: row;
    }
    .canvas-area {
        flex: 1;
    }
    .control-panel {
        flex: 1
    }
    .divider{
        border-right: 1px solid #eaeaea;
        height: 100vh;
        margin: 0 10px;
    }
    .show-file {
        width: 100%;
        box-sizing: border-box;
    }
    .control-panel {
        padding: 0 7px;
        position: relative;
    }
  </style>
</head>

<body>
    <div class="wrap">
        <div class="canvas-area" id="container"></div>
        <div class="divider"></div>
        <div class="control-panel">
            <div class="choose-template">
                <button onclick="handleClickCircle()">○</button>
                <button onclick="handleClickTriangle()">△</button>
                <button onclick="handleClickSquare()">□</button>
                <button onclick="handleClickMouse()">Mouse</button>

            </div>
            <div class="upload">
                上传 RNA 碱基序列<input type="file" onchange="jsReadFiles(this.files)" value="Read">
            </div>
            <textarea rows="10" class="show-file" id="rna-text" disabled></textarea>
            <div class="draw">
                <button onclick="draw(series, shape);">绘制</button>
                <button onclick="clearCanvas();">清除</button>
            </div>
        </div>
    </div>

    <script>
        //js 读取文件
        var series = ''
        var layer
        var shape = 'circle'
        var simpleText
        var path
        var textpath
        function jsReadFiles(files) {
            if (files.length) {
                var file = files[0];
                var reader = new FileReader();//new一个FileReader实例
                if (/text+/.test(file.type)) {//判断文件类型，是不是text类型
                    reader.onload = function () {
                        var dom = document.getElementById('rna-text')
                        console.log(this.result)
                        console.log(this.result.split('\n'))
                        series = this.result.split('\n')[1]
                        dom.append(series)
                    }
                    reader.readAsText(file);
                }
            }
        }
        function handleClickCircle() {
            shape = 'circle'
        }
        function handleClickSquare() {
            shape = 'square'

        }
        function handleClickTriangle() {
            shape = 'triangle'

        }
        function handleClickMouse() {
            shape = 'mouse'
        }
        function clearCanvas() {
            layer.clear()
        }
        function draw(series, shape) {
            var data = ''
            var width = 1000;
            var height = 1000;
            simpleText = new Konva.Text({
                x: 0,
                y: 0,
                text: series,
                fontSize: 16,
                fontFamily: 'Arial',
            });
            var textWidth = simpleText.textWidth
            var l, r, a
            var x0 = 50
            var y0 = 50
            var fontSize = simpleText.fontSize()
            switch (shape) {
                case 'circle':
                    r = (textWidth + fontSize / 2) / 2 / Math.PI
                    x0 = width / 2
                    y0 = width / 2
                    data = `M 729.33014,359.14501 A 354.81608,354.81608 0 0 1 374.51406,713.96109 354.81608,354.81608 0 0 1 19.697989,359.14501 354.81608,354.81608 0 0 1 374.51406,4.3289397 354.81608,354.81608 0 0 1 729.33014,359.14501 Z`
                    break
                case 'square':
                    x0 = 50
                    y0 = 50
                    l = textWidth / 4 + fontSize / 2
                    data = `M ${x0}, ${y0} L ${x0 + l}, ${y0} L ${x0 + l}, ${y0 + l} L ${x0}, ${y0 + l} L ${x0}, ${y0}`
                    break
                case 'triangle':
                    x0 = width / 2
                    y0 = 50
                    a = textWidth / 3 + fontSize / 2

                    data = `M ${x0}, ${y0} L ${x0 + a / 2}, ${y0 + Math.sqrt(3) / 2 * a} L ${x0 - a / 2}, ${y0 + Math.sqrt(3) / 2 * a} L ${x0}, ${y0}`
                    break
                case 'mouse':

                    data = 'm 289.4799,438.65987 -4.62303,13.84304 -7.89817,-14.9009 -7.89821,-14.90092 -4.82685,12.41737 -4.82691,12.41749 -4.91157,-12.49123 C 250.35684,424.51977 241.0891,419.95403 195.62176,406.0406 165.94265,396.95849 119.81662,378.55184 93.119434,365.13685 66.422285,351.72189 37.876328,340.74599 29.684042,340.74599 c -18.324047,0 -30.29453556,-19.45823 -19.7711044,-32.13826 9.7178064,-11.70929 21.9810304,-9.09452 37.1401034,7.91895 13.515138,15.16838 14.619757,15.4649 49.249021,13.2183 28.664328,-2.23776 97.686468,-19.93895 95.136338,-66.21268 0.21585,-22.74971 -3.78487,-52.43471 -20.61498,-76.39029 C 111.46138,114.26146 96.937498,68.277122 149.46339,41.493575 c 31.96278,-16.298177 80.83344,-7.216573 105.00536,19.513098 25.48764,28.184776 36.97294,83.907777 28.88946,140.163047 -2.9045,20.21321 -4.51206,37.52009 -3.57237,38.4598 0.93971,0.93969 10.93068,-2.74708 22.20217,-8.19288 84.45422,-40.80386 178.80797,-7.3718 202.40349,71.71685 4.0193,13.4721 7.30779,29.67679 7.30779,36.01052 0,14.68184 15.87927,15.42511 38.24163,1.78997 11.30622,-6.8938 17.51253,-15.71381 21.51399,-30.57414 6.994,-25.97356 3.12866,-47.46991 -15.82531,-88.00988 C 535.207,178.68867 520.38384,119.3156 523.98048,95.601162 529.30591,60.486788 544.16933,41.095499 583.72042,17.662344 L 603.58832,5.8910685 577.80397,34.323767 c -20.3777,22.470718 -26.50091,33.211039 -29.20158,51.22075 -6.13615,40.918713 0.3735,72.289023 24.77451,119.389413 47.10424,90.92378 30.36496,156.14204 -43.62425,169.96471 -14.80305,2.76549 -27.60296,9.07734 -35.34161,17.42753 -13.38832,14.44616 -31.7671,22.92445 -49.69455,22.92445 -9.10746,0 -12.46789,3.49857 -15.16789,15.79165 l -3.46838,15.79162 -6.51252,-12.06643 -6.51248,-12.06637 -5.06104,12.41737 -5.06105,12.41749 -3.44193,-11.65562 c -3.02171,-10.23269 -5.32653,-11.17598 -18.87972,-7.72691 -20.3304,5.17358 -62.3448,5.49092 -75.80813,0.57248 -8.8825,-3.24504 -11.48587,-1.55734 -15.32345,9.93397 z'
                    break
            }

            // canvas 初始化
            var stage = new Konva.Stage({
                container: 'container',
                width: width,
                height: height
            });
            layer = new Konva.Layer();

            // 线条轮廓
            path = new Konva.Path({
                x: 0,
                y: 0,
                stroke: '#333',
                data: data,
            });

            // 文字环绕


            var fontSize = 20
            do {
                textpath = new Konva.TextPath({
                    x: 0,
                    y: 0,
                    fill: '#333',
                    fontSize: fontSize,
                    fontFamily: 'Arial',
                    text: series,
                    data: data,
                    textBaseline: 'bottom',

                });
                fontSize--
                console.log(textpath.textWidth, path.pathLength)
            } while (textpath.textWidth > path.pathLength && fontSize > 0)
            


            layer.add(textpath);
            layer.add(path);

            // add the layer to the stage
            console.log(fontSize, r)
            stage.add(layer);
        }

    </script>

</body>

</html>